<template>
  <div ref="codeContent" style="height: 100%; overflow: auto; display: grid">
    <CFile
      v-if="
        [
          '.c',
          '.h',
          '.md',
          '.txt',
          '.json',
          '.html',
          '.vue',
          '.js',
          '.css',
          '.scss',
          '.less',
          '.d',
          '.s',
          '.ioc',
          '.bat',
          '.hex',
          '.htm',
          '.lnp',
          '.map',
          '.sct',
          '.dep',
          '.conf',
          '.scvd',
          '.lst',
          '.lics',
          '.uvoptx',
          '.uvprojx',
          '.dbgconf',
          '.iex',
          '.ino',
          '.qsf',
          '.v',
          '.'
        ].includes(fileType)
      "
      :content="content"
    />
    <!-- <iframe v-else-if="['.pdf'].includes(fileType)" :src="content" width="100%" height="100%"></iframe> -->
    <div v-else-if="['.pdf'].includes(fileType)">
      <canvas
        v-for="(item, index) of pdfDoc.numPages"
        :id="'pdfCanvas' + (index + 1)"
        :ref="'pdfCanvas' + (index + 1)"
        :key="index"
      ></canvas>
    </div>
    <el-result v-else class="resultContent" icon="warning" title="暂不支持预览"></el-result>
  </div>
</template>

<script>
// 引入PDF.js库
import PDFJS from 'pdfjs-dist'
PDFJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.min.js')

import CFile from './components/CFile.vue'
export default {
  name: 'FilePreview',
  components: { CFile },
  props: {
    fileType: {
      type: String,
      required: true
    },
    content: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      pdfDoc: {
        numPages: 0
      }
    }
  },

  mounted() {
    if (this.fileType === '.pdf') {
      this.initPdf()
    }
  },

  methods: {
    // 初始化pdf
    initPdf() {
      PDFJS.getDocument(this.content)
        .promise.then((pdfDoc_) => {
          // 返回pdf实例 getDocument
          this.pdfDoc = pdfDoc_
          let pageNum = this.pdfDoc.numPages
          // 渲染pdf
          this.$nextTick(() => {
            for (let i = 1; i <= pageNum; i++) {
              this.renderPage(i)
            }
          })
        })
        .catch((err) => {
          console.log(err)
          // this.$message.warning('未知错误,需要刷新页面')
        })
    },

    // 渲染pdf
    renderPage(num) {
      // 正在渲染
      let canvas = this.$refs['pdfCanvas' + num][0]
      let ctx = canvas.getContext('2d')

      this.pdfDoc.getPage(num).then((page) => {
        var vp = page.getViewport({ scale: 1 })
        // 返回页面内容(比例) page.getViewport(scale)
        var viewport = page.getViewport({
          scale: (this.$refs.codeContent.offsetWidth - 10) / vp.width
        })
        canvas.height = viewport.height // 返回内容高度
        canvas.width = viewport.width // 返回内容宽度

        var renderContext = {
          canvasContext: ctx, // 画布
          viewport: viewport // 内容
        }
        // 页面呈现({画布,内容}) page.render(renderContext);
        page.render(renderContext)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.resultContent {
  height: 100%;
  display: flex;
  align-items: center;
}
</style>
